<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery/jquery-3.4.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/detail.css"/>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<!--<div class="container">-->
<!--    <h1>商品详情页</h1>-->
<!--    <table class="table table-hover">-->
<!--        <tr>-->
<!--            <td>商品名称</td>-->
<!--            <td colspan="3" th:text="${GoodsDetail.getGoodsName()}"></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>商品图片</td>-->
<!--            <td colspan="3"><img th:src="@{${GoodsDetail.getImgPath()}}" alt="华为手机P50" width="100px" height="100px">-->
<!--            </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>秒杀开始时间</td>-->
<!--            <td colspan="3" th:text="${ #dates.format(GoodsDetail.getStartTime(),'yyyy-MM-dd HH:mm:ss')}"></td>-->
<!--            <td>-->
<!--                <span th:if="${status eq 0}">秒杀未开始</span>-->
<!--                <span th:if="${status eq 1}">秒杀进行中</span>-->
<!--                <span th:if="${status eq 2}">秒杀已结束</span>-->
<!--            </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>商品原价</td>-->
<!--            <td colspan="3" th:text="${GoodsDetail.getPrice()}"></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>秒杀价格</td>-->
<!--            <td colspan="3" th:text="${GoodsDetail.getSeckillPrice()}"></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>库存数量</td>-->
<!--            <td colspan="3" th:text="${GoodsDetail.getStockNum()}"></td>-->
<!--        </tr>-->
<!--    </table>-->
<!--</div>-->

<div class="goods">
    <div class="containers">
        <div class="goods_view">
            <img th:src="@{${GoodsDetail.imgPath}}" width="300" height="300"/>
        </div>
        <div class="goods_info">
            <h2 th:text="${GoodsDetail.getGoodsName()}"></h2>
            <p class="title" th:text="${GoodsDetail.getGoodsName()}"></p>
            <p>
                <span class="price1" th:text="${GoodsDetail.seckillPrice}+'元  '"></span>
                <del><span class="price2" th:text="${GoodsDetail.price}+'元'"></span></del>
            </p>
            <div class="seckill_data">
                <div>
                    <span>秒杀开始时间</span>
                    <p th:text="${#dates.format(GoodsDetail.startTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
                <div>
                    <span>秒杀结束时间</span>
                    <p th:text="${#dates.format(GoodsDetail.endTime, 'yyyy-MM-dd HH:mm:ss')}"></p>
                </div>
            </div>
            <div class="seckillStatus" id="seckillTip">
                <input type="hidden" id="remainSeconds" th:value="${remainSeconds}"/>
                <input type="hidden" id="status" th:value="${status}">
                <span th:if="${status eq 0}">秒杀倒计时：
                    <span id="countDown" th:text="${remainSeconds}"></span>秒
                </span>
                <span th:if="${status eq 1}">秒杀进行中</span>
                <span th:if="${status eq 2}">秒杀已结束</span>
            </div>
            <div class="count">
                <span>库存数量：</span>
                <span th:text="${GoodsDetail.getStockNum()}"></span>
            </div>

            <form id="seckillForm" method="post" action="/seckillAPI">
                <input type="hidden" name="goodsId" th:value="${GoodsDetail.getGoodsId()}"/>
                <input type="hidden" name="userId"
                       th:value="${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*100),1,0)}"/>
                <button class="btn btn-primary btn-block" type="submit" id="buyButton">马上抢购...</button>
            </form>
        </div>
    </div>
</div>
</body>


<script>
    $(function () {
        countDown();
    });

    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        var status = $("#status").val();
        if (remainSeconds == -1 && status == 2) {
            $("#buyButton").attr("disabled", true);
            return;
        }

        var timeout;
        if (remainSeconds > 0) {
            $("#buyButton").attr("disabled", true);
            timeout = setTimeout(function () {
                $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();
            }, 1000);
        } else if (remainSeconds == 0) {
            $("#buyButton").attr("disabled", false);
            if (timeout) {
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀进行中");
        }
    };
</script>
</html>